<template>
  <div :style="item.columnTextStyle">
    <div>
      <el-tooltip
        v-if="
          item.iconName &&
          (!item.iconShow || item.iconShow(scope.row)) &&
          (!item.iconPosition || item.iconPosition === 'left')
        "
        @click="item.iconClick(scope.row)"
        :class="item.iconClick ? 'btn-icon-click' : ''"
        :content="item.iconTitle"
        placement="top-start"
      >
        <span @click="item.iconClick(scope.row)">
          <svg-icon
            :icon-class="item.iconName(scope.row)"
            :class="item.isRotate ? 'column-svg-rotate' : ''"
            :style="`color: ${item.iconColor}};`"
            :size="item.iconSize ? item.iconSize : 1"
          ></svg-icon>
        </span>
      </el-tooltip>
    </div>
    <div :style="item.cellTextStyle">
      <span v-if="item.loadImage">
        <ImageViewer :url="scope.row[item.name]" />
      </span>
      <span v-else>
        <div v-if="item.customSlotScope">
          <div v-html="item.customSlotScope(scope.row)"></div>
        </div>
        <div v-else>
          <span
            v-if="item.select"
            :style="
              item.optionsColor
                ? `color: ${
                    item.optionsColor[
                      scope.row[item.name] -
                        (item.colorIndex ? item.colorIndex : 0)
                    ]
                  };`
                : ''
            "
          >
            <span v-if="!item.link">
              {{ item.options[scope.row[item.name]] }}
            </span>
            <span v-else>
              <el-link @click="item.linkClick(scope.row)">
                {{ item.options[scope.row[item.name]] }}</el-link
              ></span
            >
          </span>
          <span
            v-if="
              item.name === 'operate' && item.operate && item.operate.length > 0
            "
          >
            <span
              v-for="(btn, index) in item.operate"
              :key="index"
              :style="btn.customStyle || {}"
              v-show="
                !btn.permission ||
                ($btnPermission.verify(btn.permission) &&
                  (!btn.onShow || btn.onShow(scope.row, formData)))
              "
            >
              <span v-if="!btn.more">
                <span v-if="btn.confirm">
                  <el-popconfirm
                    :title="btn.message"
                    @confirm="
                      btn.fun(
                        scope.row,
                        formRowId,
                        formGrid,
                        gridRefreshFun,
                        formData
                      )
                    "
                  >
                    <el-button
                      slot="reference"
                      :style="{ color: btn.color }"
                      :type="btn.type || 'text'"
                      size="small"
                      :disabled="
                        btn.onDisabled && btn.onDisabled(scope.row, formData)
                      "
                      >{{ btn.name }}</el-button
                    >
                  </el-popconfirm>
                </span>
                <span v-else>
                  <el-button
                    :type="btn.type || 'text'"
                    :style="{ color: btn.color }"
                    size="small"
                    @click="
                      btn.fun(
                        scope.row,
                        formRowId,
                        formGrid,
                        gridRefreshFun,
                        formData
                      )
                    "
                    :disabled="
                      btn.onDisabled && btn.onDisabled(scope.row, formData)
                    "
                    >{{ btn.name }}</el-button
                  >
                </span>
              </span>

              <span v-else>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    {{ btn.name
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(dropMenu, index) in btn.more"
                      :key="index"
                      v-show="
                        !dropMenu.permission ||
                        ($btnPermission.verify(dropMenu.permission) &&
                          (!dropMenu.onShow ||
                            dropMenu.onShow(scope.row, formData)))
                      "
                      :disabled="
                        dropMenu.onDisabled &&
                        dropMenu.onDisabled(scope.row, formData)
                      "
                    >
                      <el-button
                        :type="dropMenu.type || 'text'"
                        :style="{ color: dropMenu.color }"
                        size="small"
                        @click="
                          dropMenu.fun(
                            scope.row,
                            formRowId,
                            formGrid,
                            gridRefreshFun,
                            formData
                          )
                        "
                        :disabled="
                          dropMenu.onDisabled &&
                          dropMenu.onDisabled(scope.row, formData)
                        "
                        >{{ dropMenu.name }}</el-button
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </span>
          </span>
          <span
            v-if="
              !item.select &&
              item.name !== 'operate' &&
              (!item.operate || item.operate.length <= 0)
            "
          >
            <div v-if="!item.ellipsis">
              <span v-if="!item.link"> {{ scope.row[item.name] }} </span>
              <span v-else>
                <el-link @click="item.linkClick(scope.row)">{{
                  scope.row[item.name]
                }}</el-link></span
              >
            </div>
            <div v-if="item.ellipsis" class="table-column-ellipsis">
              <el-tooltip :content="scope.row[item.name]" placement="top">
                <span v-if="!item.link"> {{ scope.row[item.name] }} </span>
                <span v-else>
                  <el-link @click="item.linkClick(scope.row)">{{
                    scope.row[item.name]
                  }}</el-link></span
                >
              </el-tooltip>
            </div>
          </span>
        </div>
      </span>
    </div>
    <el-tooltip
      v-if="
        item.iconName &&
        (!item.iconShow || item.iconShow(scope.row)) &&
        item.iconPosition &&
        item.iconPosition === 'right'
      "
      @click="item.iconClick(scope.row)"
      :class="item.iconClick ? 'btn-icon-click' : ''"
      :content="item.iconTitle"
      placement="top-start"
    >
      <span @click="item.iconClick(scope.row)">
        <svg-icon
          :icon-class="item.iconName(scope.row)"
          :class="item.isRotate ? 'column-svg-rotate' : ''"
          :style="`color: ${item.iconColor}};`"
          :size="item.iconSize ? item.iconSize : 1"
        ></svg-icon>
      </span>
    </el-tooltip>
  </div>
</template>
<script>
import ImageViewer from "@/components/ImageViewer/index.vue";

export default {
  name: "ColumnModel",
  components: {
    ImageViewer,
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    scope: {
      type: Object,
      default: () => {},
    },
    formData: {
      type: Object,
      default: () => {},
    },
    formGrid: {
      type: Object,
      default: () => {},
    },
    formRowId: {
      type: Number,
      default: () => null,
    },
    gridRefreshFun: {
      type: Function,
      default: () => null,
    },
  },
};
</script>
<style lang="scss" scoped></style>
